// ------------------------------------
// Screen -- Home
// ------------------------------------
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { passportActions } from 'reduxs'
import { BackTop, Row, Col, Card, Alert, InputNumber } from 'antd'
//import { HttpServices } from 'services/utils'
import CoreLayout from 'containers/layout'
import { getRoutes } from '../../services/utils'
import * as Features from '../index'
//import { getToken } from 'services/token'
//import NumberInfo from 'ant-design-pro/lib/NumberInfo'
//import numeral from 'numeral'
import _ from 'lodash'
import PageHeader from './components/header'
import QuickStart from './components/quick-start'
//import PageHeader from 'ant-design-pro/lib/PageHeader'
//import './components/style.scss'




@connect(
  state => ({
    auth:     state.Passport.auth,
    homeData: state.Passport.homeData,
    getHomePending: state.Passport.getHomePending
  }),
  dispatch => ({
    actions: bindActionCreators({...passportActions}, dispatch)
  })
)
export default class Home extends PureComponent {

  //state = { visible: false }
  
  constructor (props) {
    super(props)
    this.pageContainer = null
  }

  componentDidMount () {
    this.pageContainer = document.querySelector('.layout-page-container>div')
    this.pageContainer.style.backgroundColor = '#eaedf1'
    this.pageContainer.style.padding = 0
    //this.pageContainer.style.height = '2000px'
    this.props.actions.home()
  }
  
  render() {
    const { location, auth, getHomePending, homeData } = this.props
    const options = {
      location,
      //pageCode: '1001',
      /*breadcrumb: [
        { name: '主页' }
      ]*/
    }
    let { protoTotal, protoAccess, userTotal, userRank } = homeData || {}
    //const Routes = getRoutes(Features)
    //console.log(window.routeConfig)
    let quickStart = []
    for (let item of auth.quickStart) {
      /^\//.test(item) && quickStart.push(item)
    }
    return (
      <CoreLayout {...options}>
        <BackTop 
          target={() => document.querySelector('.layout-page-container')}
          />
        <PageHeader 
          auth={auth}
          protoTotal={protoTotal || '--'}
          protoAccess={protoAccess || '--'}
          userTotal={userTotal || '--'}
          userRank={userRank || '--'}
          />
        <div style={{ padding: 20 }}>
          <Row gutter={16}>
            <Col span="16">
              <QuickStart
                data={quickStart}
                //data={['/proto-role/user-info', '/proto-role/user-log', '/proto-tool/send-mail']}
                loading={getHomePending}
                />
            </Col>
            <Col span="8">
            <Card loading title="Card title"  bodyStyle={{ padding: 0, minHeight: 300,  }}>
              Whatever content
            </Card>
            </Col>
          </Row>
        </div>
      </CoreLayout>
    )
  }
}